<template>
  <t-layout class="page-user-main">
    <t-header class="page-user-main-header">
      <t-head-menu theme="dark" height="120px" expand-type="popup" v-model="menu" @change="path => $router.push(path)">
        <template #logo>
          <img width="65" class="logo" src="@/assets/logo.png" alt="logo" />
        </template>
        <t-menu-item value="/user"> {{ lang.t('menu.home') }} </t-menu-item>
        <t-menu-item value="/user/config"> {{ lang.t('menu.config') }} </t-menu-item>
        <t-menu-item value="/user/account"> {{ lang.t('menu.account') }} </t-menu-item>
        <template #operations>
          <div class="operations">
            <t-dropdown :min-column-width="140" trigger="click" placement="bottom">
              <template #dropdown>
                <t-dropdown-menu>
                  <t-dropdown-item class="page-user-main-user-item" @click="userStore.logout">
                    <t-icon name="logout"></t-icon>{{ lang.t('user.logout') }}
                  </t-dropdown-item>
                </t-dropdown-menu>
              </template>
              <div class="item">
                <t-button theme="default" variant="text">
                  <template #icon>
                    <t-icon name="user-circle" />
                  </template>
                  <div class="user">
                    <span class="wrap">{{ userStore.getData().name }}</span><t-icon name="chevron-down" />
                  </div>
                </t-button>
              </div>
            </t-dropdown>
            <t-dropdown :min-column-width="120" trigger="click">
              <template #dropdown>
                <t-dropdown-menu>
                  <t-dropdown-item 
                    v-for="item in app.lang.list" 
                    :active="item.code == app.lang.get()"
                    @click="app.lang.set(item.code)"
                  >
                    {{ item.name }}
                  </t-dropdown-item>
                </t-dropdown-menu>
              </template>
              <div class="item">
                <t-button theme="default" shape="square" variant="text">
                  <t-icon name="internet" />
                </t-button>
              </div>
            </t-dropdown>
          </div>
        </template>
      </t-head-menu>
    </t-header>
    <t-content class="page-user-main-content">
      <router-view v-if="over"></router-view>
    </t-content>
    <t-footer class="page-user-main-footer"> 
      {{ $t('copyright') }} 
    </t-footer>
  </t-layout>
</template>

<script setup>
  import { ref, computed, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import app from '@/app'
  import userStore from '@/store/user'
  import indexStore from '@/store/index'

  const lang = app.lang.space('page.user.main')
  const over = ref(false)

  // 动态更新路由菜单
  const menu = computed(() => {
    const route = useRoute()
    return route.path
  })

  // 加载插件
  app.loading(true)
  indexStore.get(async () => {
    over.value = true
    await nextTick()
    app.loading(false)
  })
</script>

<style lang="scss">
  @import '@/style/global';
  .page-user-main{
    min-height: 100%;
    background: $color-bg;

    &-header{
      .t-menu--dark{
        .t-button {
          border-width: 0;
          --ripple-color: var(--td-gray-color-10) !important;

          &:hover {
            background: var(--td-gray-color-12) !important;
          }
        }
        .t-icon {
          color: #fff;
          font-size: 20px;
        }
      }

      .t-menu__item {
        min-width: unset;
        padding: 0 16px;
      }

      .logo{
        margin-left: 25px;
        border-radius: 3px;
      }

      .operations{
        display: flex;
        align-items: center;
        margin-right: 15px;

        .item {
          margin: 0 5px;
        }
      }

      .user{
        display: flex;
        align-items: center;
        color: #fff;

        span{
          max-width: 120px;
          display: block;
        }

        .t-icon {
          margin-left: 4px;
          font-size: 16px;
        }
      }
    }

    &-user-item{
      .t-icon {
        font-size: 16px;
        margin-right: 8px;
      }
      .t-dropdown__item-text {
        display: flex;
        align-items: center;
        font-size: 14px;
      }
    }

    &-content{
      padding: 30px;

      .bar{
        padding-bottom: 20px;
        .tip{
          color: $color-body;
          font-size: 14px;
          line-height: 30px;
          .t-icon{
            position: relative;
            top: -1px;
          }
        }
      }
      
      .bg-box{
        background-color: var(--td-bg-color-container);
        padding: 30px 35px;
        border-radius: 5px;
        margin-bottom: 20px;
        position: relative;
      }

      .left-box{
        float: left; 
      }

      .right-box{
        float: right; 
      }

      .box{
        overflow: hidden;
        position: relative;
      }
    }

    &-footer{
      text-align: center;
    }
  }
</style>